<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4564894</title>
</head>
<body>
    <a href="#">内容</a>
    <p>内容</p>
    <p>哈哈哈</p>
    <div class="div1">class</div>
    <div id="id"> id</div>
    <h1></h1>
    <script>
        // dom  document Object model   文档对象模型
        // document对象  节点   代表全局的节点对象
        console.log(document);
        
        console.log(document.documentElement , 'html');
        console.log(document.body   ,'body');
        console.log(document.head    ,'head');
        console.log(document.title    ,'title');
        document.title='666'


        // 页面写入内容
        document.write('新的内容')

        // 元素节点
            // 获取元素节点
            // 根据html标签名获取    拿到的是元素合集
            console.log(document.getElementsByTagName('p'));
            
            // 根据类名来获得      拿到的是元素合集
            console.log(document.getElementsByClassName('div1'),'calss');
            // id     id拿到的是元素本身
            console.log(document.getElementById('id'));
            
            // 获取元素    .querySelectorAll('选择器')
            let ps = document.querySelectorAll('p')
            console.log(ps);

            // 获取单个元素   .querySelector('选择器')
            let one = document.querySelector('#id')
            console.log(one);
            
            // 渲染内容
            // 可以渲染文本和代码
            one.innerHTML = "<h1>新的文字</h1>";
            // 只能渲染文本
            one.innerText="<h1>新的text</h1>"

            // 渲染距离11月1号的倒计时
                let cdate = Math.floor((new Date('2025-11-1')- new Date())/1000)
                console.log(cdate);
                let day =Math.floor(cdate/60/60/24)
                let hh =Math.floor(cdate/60/60%24)
                let mm =Math.floor(cdate/60%60)
                let ss =Math.floor(cdate%60)

                let str =`${day}天${hh}时${mm}分${ss}秒`
                console.log(str);
                let h1 = document.querySelector('h1')
                h1.innerHTML = str
        


        // 文字节点

        // 属性节点

    </script>
</body>
</html>